<template>
	<view>
		<u-navbar title="帐户中心"  :autoBack="true">
		</u-navbar>
		<view class="container" v-if="Object.keys(parterInfo).length">
			<view class="recommend">
				<view class="title">
					带我的家人信息
				</view>
				<template v-if="parterInfo.dre">
					<view class="recommend_info">
						<view class="recommend_info_title">
							带我的家人：
						</view>
						<view class="recommend_info_des">
							{{parterInfo.dre.realname}}
						</view>
					</view>
					<view class="recommend_info">
						<view style="display: flex; align-items: center;justify-content: space-between;">
							<view class="recommend_info_title">
								电话：
							</view>
							<view class="recommend_info_des">
								{{parterInfo.dre.user.mobile}}
							</view>
						</view>
						<view class="copy" @click="coyp(parterInfo.dre.user.mobile)">
							复制
						</view>
					</view>
					<view class="recommend_info">
						<view class="recommend_info_title">
							转入ID：
						</view>
						<view class="recommend_info_des">
							{{parterInfo.dre.partner_account}}
						</view>
					</view>
				</template>
				<u-empty mode="list" text="暂无推荐人" v-else></u-empty>
			</view>
			<view class="recommend">
				<view class="title" v-if="parterInfo.parent">
					前辈信息	
				</view>
				<view class="title" v-else>
					请联系族长(客服)，微信:ctbczkf	
				</view>
				<template v-if="parterInfo.parent">
					<view class="recommend_info">
						<view class="recommend_info_title">
							前辈姓名：
						</view>
						<view class="recommend_info_des">
							{{parterInfo.parent.realname}}
						</view>
					</view>
					<view class="recommend_info">
						<view style="display: flex; align-items: center;justify-content: space-between;">
							<view class="recommend_info_title">
								电话：
							</view>
							<view class="recommend_info_des">
								{{parterInfo.parent.user.mobile}}
							</view>
						</view>
						<view class="copy" @click="coyp(parterInfo.parent.user.mobile)">
							复制
						</view>
					</view>
					<view class="recommend_info">
						<view class="recommend_info_title">
							转入ID：
						</view>
						<view class="recommend_info_des">
							{{parterInfo.parent.partner_account}}
						</view>
					</view>
					<!--
					<view class="desc">
						您的等级已与推荐人同级或已超越推荐人时，此卡片为你直线上 级批发商信息，您可直接与直线上级批发商联系进货。
					</view>
					-->
				</template>
				<u-empty mode="list" text="暂无前辈，请联系族长" v-else></u-empty>
			</view>
			<view class="wealth">
				<view class="title">
					我的财富
				</view>
				<view class="wealth_list">
					<view class="left">
						<view class="name">绿色石头</view>
						<view class="num">{{parterInfo.user.green_stone_amount}}</view>
					</view>
					<view class="right" @click="toTstoneTransfer(1)">
						转账
					</view>
				</view>
				<view class="wealth_list">
					<view class="left">
						<view class="name">蓝色石头</view>
						<view class="num">{{parterInfo.user.blue_stone_amount}}</view>
					</view>
					<view class="right" @click="toTstoneTransfer(2)">
						转账
					</view>
				</view>
				<view class="wealth_list">
					<view class="left">
						<view class="name">红色石头</view>
						<view class="num">{{parterInfo.user.red_stone_amount}}</view>
					</view>
					<view class="right" @click="toTstoneTransfer(3)">
						转账
					</view>
				</view>
			</view>
			<view class="redeem_card">
				<view class="title">
					星级用户兑换卡申请
				</view>
				<view class="card_num">
					剩余{{parterInfo.trans_card_amount}}张
				</view>
<!-- 				<view class="nav">
					<view class="s1" :class='{active: type == 0}' @click='setType(0)'>申请列表</view>
					<view class="s1" :class='{active: type == 1}' @click='setType(1)'>直接赋予帐号</view>
				</view> -->
				<template v-if="type==0">
					<template v-if="applyList.length">
						<view class="card_list" v-for="v,i in applyList" :key="i">
							<view class="left">
								<u--image :showLoading="true" :src="v.applyer.avatar_fullurl" shape="circle" width="88rpx"
									height="88rpx"></u--image>
								<view class="name">{{v.applyer.nickname}}</view>
							</view>
							<view class="right">
								<view @click="actionApply(v.apply_id,0)">赋予</view>
								<view @click="actionApply(v.apply_id,1)">拒绝</view>
							</view>
						</view>
					</template>
					<view class="empty" v-else>
						<u-empty mode="list" text="暂无数据"></u-empty>
					</view>
				</template>
				<view class="info" v-else>
					<view class="c1">输入帐号手机号</view>
					<view class="c2">
						<u--input type="number" v-model='mobile' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
						</u--input>
					</view>
					<view class="but">
						<view class="s2" @click="onSend()">
							<text>提 交</text>
						</view>
					</view>
				</view>
		
		
			</view>
			<view class="water">
				<view class="title" style="display: flex;justify-content: space-between;align-items: center;">
					<view>近一个月流水</view>
					<view class="more" @click="goMore">更多</view>
				</view>
				<view class="water_list" v-for="v,i in waterList" :key="i">
					<view class="time">{{$u.timeFormat(v.createtime*1000, 'yyyy/mm/dd hh:MM')}}</view>
					<view class="account">
						<view>{{v.type==1?'转账':'消费'}}</view>
						<view>{{v.stone_type|fnName}} {{v.from_id==parterInfo.user_id?'-':'+'}} {{v.amount}}</view>
					</view>
					<template v-if="v.type==1">
						<view class="account_info">
							<view>转账人：</view>
							<view>{{ v.from.realname }} ({{ v.from.partner_account || '-' }})</view>
						</view>
						<view class="account_info">
							<view>到账人：</view>
							<view v-if="'normal' == v.to.role">{{ v.to.realname }}</view>
							<view v-else>{{ v.to.realname }} ({{ v.to.account || '-' }})</view>
						</view>
					</template>
					<view class="account_info" v-else>
						<view>消费人：</view>
						<view>{{ v.from.realname }} ({{ v.from.partner_account || '-' }})</view>
					</view>
					<view class="account_info" v-if="v.type==1">
						<view>附言：</view>
						<view>{{v.notice}}</view>
					</view>
					<view class="account_info" v-else>
						<view>消费内容：</view>
						<view>{{v.consumeinfo}}</view>
					</view>
		
		
				</view>
				<view class="empty" v-if="!waterList.length">
					<u-empty mode="list" text="暂无数据"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		partner_baseinfo_api,
		waitingApplyList_api,
		assignrole_api,
		stoneLog_api,
		dealapply_api
	} from '@/api/second.js'
	export default {
		data() {
			return {
				keyword: '',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				type: 0,
				list: [],
				page: 1,
				stop_loading: false,
				take_show: false,
				take_info_show: false,
				take_row_index: 0,
				row: {},
				info: {},
				parterInfo: {},
				applyList: [],
				mobile: '',
				waterList: [],
				total: 0
			};
		},
		filters: {
			fnName(value) {
				const data = {
					1: '绿石头',
					2: '蓝石头',
					3: '红石头',
				}
				return data[value]
			},

		},
		computed: {

		},
		onLoad() {
			this.getParterInfo();
			this.getList()
			
			uni.$on('updatenum', () => {
				this.getParterInfo();
			})
		},
		onShow() {
			this.getWaterlist()
		},
		onUnload() {
			uni.$off('updatenum')
		},
		methods: {
			getList() {
				waitingApplyList_api().then(res => {
					this.applyList = res.data
					console.log(this.applyList);
				})
			},
			getParterInfo() {
				partner_baseinfo_api().then(res => {
					this.parterInfo = res.data
				})
			},
			toTstoneTransfer(type) {
				uni.navigateTo({
					url: `/pages/second/stoneTransfer?type=${type}`
				})
			},
			actionApply(id, type) {
				if (!type) {
					uni.showModal({
						title: '温馨提示',
						content: '确定要赋予吗',
						success: (res) => {
							if (res.confirm) {
								dealapply_api({
									"action": "pass",
									"apply_user_id": id,
								}).then(() => {
									this.$u.toast('赋予成功')
									this.getList()
									this.getParterInfo();
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.showModal({
						title: '温馨提示',
						placeholderText: '请输入拒绝申请原因',
						editable: true,
						success: (res) => {
							if (!res.content) return this.$u.toast('请输入拒绝原因')
							if (res.confirm) {

								dealapply_api({
									"action": "reject",
									"apply_user_id": id,
									reject_reason: res.content
								}).then(() => {
									this.$u.toast('已拒绝申请')
									this.getList()
								})
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			getWaterlist() {
				stoneLog_api({
					page: 1,
					from_time: this.$u.timeFormat(this.getLastMonthFromDate(new Date()), 'yyyy-mm-dd'),
					to_time: this.$u.timeFormat(Date.now(), 'yyyy-mm-dd')
				}).then(res => {
					this.waterList = res.data.data
				}).catch(err => {
					this.waterList = []
				})
			},
			getLastMonthFromDate(date) {
				// 获取传入日期的年、月
				let year = date.getFullYear();
				let month = date.getMonth();

				// 如果当前月份为一月（0），则需要向前推一年
				if (month === 0) {
					year--;
					month = 11; // 12 月份是 11
				} else {
					month--; // 否则，只需向前推一个月
				}

				// 创建一个新的 Date 对象，表示上个月的日期
				const lastMonth = new Date(year, month);

				// 返回上个月的日期对象
				return lastMonth;
			},
			setType(type) {
				this.type = type
			},
			goMore() {
				uni.navigateTo({
					url: `/pages/second/flowRecord?parent_id=${this.parterInfo.user_id}`
				})
			},
			onSend() {
				if (!this.mobile) return this.$u.toast('请输入手机号')
				console.log(this.mobile);
				// 暂时屏幕，方便测试
				// if (!uni.$u.test.mobile(this.mobile)) return this.$u.toast('请输入正确的手机号')    
				uni.showModal({
					title: '温馨提示',
					content: '确定要直接赋予该账号吗',
					success: (r) => {
						if (r.confirm) {
							assignrole_api({
								mobile: this.mobile
							}).then((res) => {
								if (1 == res.code) {
									this.$u.toast(res.msg)
									this.mobile = ''
									this.getList()
									this.getParterInfo();
								}
							})
						}
					}
				})
			},
			coyp(v) {
				uni.setClipboardData({
					data: v,
					showToast: false,
					success: () => {
						this.$u.toast('内容已复制')
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-modal {
		.uni-modal__textarea {
			font-size: 12px !important;
			color: #9E9E9E !important;
		}

	}

	.container {
		margin: 40rpx;
		padding-bottom: 20rpx;

		.recommend {
			padding: 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			display: flex;
			flex-direction: column;
			margin-bottom: 52rpx;

			.title {
				font-size: 40rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #0A1629;
				padding-bottom: 20rpx;
			}

			.recommend_info {
				padding: 16rpx 0;
				display: flex;
				align-items: center;
				display: flex;
				flex: 1;

				.copy {
					text-align: right;
					flex: 1;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #7677EB;
				}

				.recommend_info_title {
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #91929E;
				}

				.recommend_info_des {
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #0A1629;
				}


			}

			.desc {
				padding-top: 20rpx;
				font-size: 20rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #91929E;
			}
		}

		.wealth {
			padding: 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			display: flex;
			flex-direction: column;
			margin-bottom: 52rpx;

			.title {
				font-size: 40rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #0A1629;
				padding-bottom: 20rpx;
			}

			.wealth_list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;

				.left {
					display: flex;
					align-items: center;

					.name {
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 400;
						color: #688AB5;
					}

					.num {
						padding-left: 40rpx;
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 700;
						color: #0A1629;
					}
				}

				.right {
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #7677EB;
				}
			}

		}

		.redeem_card {
			padding: 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			display: flex;
			flex-direction: column;
			margin-bottom: 52rpx;

			.title {
				font-size: 40rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #0A1629;
				padding-bottom: 20rpx;
			}

			.card_num {
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #9E9E9E;
			}

			.nav {
				@include flex;
				justify-content: space-between;
				height: 84rpx;
				border-radius: 48rpx;
				background-color: #E6EDF5;
				padding: 6rpx 8rpx;
				margin-top: 46rpx;
				margin-bottom: 20rpx;

				.s1 {
					width: 288rpx;
					height: 84rpx;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #0A1629;
					line-height: 84rpx;
					text-align: center;

					&.active {
						background-color: #7677EB;
						color: #FFFFFF;
					}
				}
			}

			.card_list {
				margin-top:18rpx;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.name {
						padding-left: 40rpx;
						font-size: 28rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 700;
					}
				}

				.right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #7677EB;

					>view:first-child {
						padding-right: 28rpx;
					}
				}
			}

			.info {
				width: 566rpx;
				margin: 0 auto;
				margin-top: 52rpx;
				background-color: #fff;
				border-radius: 48rpx;
				@include flex(column);


				.c1 {
					height: 28rpx;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #7D8592;
					line-height: 28rpx;
				}

				.c2 {
					width: 566rpx;
					margin-top: 40rpx;
					position: relative;

					/deep/ .u-input {
						height: 98rpx;
						border-radius: 28rpx;
					}

					.on_in {
						position: absolute;
						inset: 0;
					}
				}


			}

			.but {
				@include flex;
				margin-top: 60rpx;

				.s2 {
					width: 290rpx;
					height: 96rpx;
					background: #7677EB;
					box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
					border-radius: 28rpx;
					margin: 0 auto;
					text-align: center;

					text {
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 96rpx;
					}
				}
			}
		}

		.water {
			padding: 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			display: flex;
			flex-direction: column;
			margin-bottom: 52rpx;

			.more {
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #9E9E9E;
			}

			.title {
				font-size: 40rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #0A1629;
				padding-bottom: 40rpx;
			}

			.water_list {
				padding: 40rpx;
				background: #F4F9FD;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				opacity: 1;
				margin-bottom: 40rpx;

				.time {
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #91929E;
				}

				.account {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #000000;
					padding: 32rpx 0 10rpx;
				}

				.account_info {
					display: flex;
					align-items: center;
					padding: 23rpx 0;

					&:last-child {
						padding-bottom: 0;
					}

					>view:first-child {
						width: 142rpx;
						font-size: 28rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						color: #91929E;
						text-align: right;
					}

					>view:last-child {
						flex: 1;
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						color: #688AB5;
					}
				}
			}
		}
	}
</style>